<template>
  <el-auto-resizer>
    <template #default="{ height, width }">
      <div style="position: relative;">
        <el-table-v2 :id="'myTableV2'+curTableId" ref="tableV2Ref" :row-height="36"
          :header-height="headerHeight ? headerHeight : (isMultistageHeader ? 72 : 36)" class="zs-el-table-v2"
          header-class="zs-el-table-v2-header" :row-class="props.customRowClassFun || tableData.rowClass"
          v-loading="props.loading" :width="width" :height="height" :columns="tableData.columns" :data="tableData.data"
          :fixed="fixed" :row-key="rowKey" @scroll="tableScroll">
          <template #empty>
            <div class="flex items-center justify-center h-100% cur-empty zs-text-gray">
              暂无数据
            </div>
          </template>
          <template v-if="isRowSpan" #row="props">
            <slot name="rowSpan" v-bind="props">
              <CurMergeRow v-bind="props" />
            </slot>
          </template>
          <template v-if="isMultistageHeader" #header="props">
            <slot name="headerSlot" v-bind="props">
              <CustomizedHeader v-bind="props" />
            </slot>
          </template>
        </el-table-v2>
        <div id="tooltipId" class="self-toolTip" :style="{
          '--after-top': (tooltip.after.top),
          '--after-left': (tooltip.after.left),
          '--after-border-top-color': (tooltip.after.topColor),
          '--after-border-right-color': (tooltip.after.rightColor),
          '--after-border-bottom-color': (tooltip.after.bottomColor),
          '--after-border-left-color': (tooltip.after.leftColor),
            top: (tooltip.top + 'px'),
            left: (tooltip.left + 'px'), 
            maxWidth:(tooltip.width+'px'),
          }" 
          v-html="tooltip.content">
        </div>
      </div>
    </template>
  </el-auto-resizer>
</template>
<script setup lang="jsx">
import { parseTime, splitFormat } from "@/utils/publicUtils";
import { reactive, watch, ref, unref, cloneVNode, onActivated } from "vue";
// import { listToTree } from "@/views/projectConfig/components/subjectListToTree"

const props = defineProps({
  loading: { type: Boolean },
  columns: { type: Array, default: () => { return [{ key: 'test', title: '未传递表格列' }] } },
  data: { type: Array, default: () => [] },
  // 展开效果显示在那列
  expandColumnKey: { type: String },
  // 默认展开集合
  expendList: { type: Array, default: () => [] },
  // 是否固定
  fixed: { type: Boolean, default: false },
  // 是否开启选择
  isSelect: { type: Boolean, default: false },
  // 是否禁用多选
  isDisabledSelect: { type: Boolean, default: false },
  // 设置是否选中的字段名
  selectModelName: { type: String, default: "isChecked" },
  // 是否开启父子联动选择
  isLinkageSelect: { type: Boolean, default: false },
  // 子数据对比父级数据中的字段名称
  findSonKey: { type: String, default: "parentNumber" },
  // 父级数据对比子数据中的字段名称
  findParentKey: { type: String, default: "courseNumber" },
  // 自定义选择方法
  tableSelectChange: { type: Function },
  // 自定义方法时自定义选择的父级样式状态
  tableSelectIndeterminate: { type: Boolean, default: false },
  // 是否是树形
  isTree: { type: Boolean, default: false },
  // 斑马纹样式的字段名称
  rowClassName: { type: String, default: "curParentIndex" },
  // 添加行class方法（带默认类名）
  rowClassFun: { type: Function },
  // 自定义class方法（不带默认类名）
  customRowClassFun: { type: Function },
  // 判断是否末级字段
  laststage: { type: Object, default: () => { return { name: 'lastStage', val: 1 } } },
  // 是否有末级样式类名
  isLastStageClass: { type: Boolean, default: true },
  // 级别字段
  levelObj: { type: Object, default: () => { return { name: 'level', val: 1, childrenName: 'children' } } },
  // 是否开启树形一级加粗border-top样式
  isFirstLevelBorder: { type: Boolean, default: false },
  // 是否行合并
  isRowSpan: { type: Boolean, default: false },
  // 行合并索引
  rowSpanIndex: { type: Array, default: () => [] },
  // 列合并索引
  colSpanIndex: { type: Array, default: () => [] },
  // 是否表头合并
  isMultistageHeader: { type: Boolean, default: false },
  // 多级表头数据对象
  multistageHeaderData: { type: Object },
  // 表格表头高度
  headerHeight: { type: Number },
  rowKey: { type:String, default: 'id' },
  // 表格单元格提示方向
  tooltipDirection: { type:String, default: 'top' },
});

let emits = defineEmits(['onSelectChange'])

watch(
  () => props.columns,
  (newVal) => {
    initColumns(newVal);
  }, { deep: true }
);
watch(
  () => [props.data, props.expendList],
  (newVal) => {
    // if (newVal[1].length > 0) {
    //   tableData.expendList = newVal[1];
    // }
    let flatData = []
    let curData = []
    if (props.isTree) {
      flatData = treeToFlattening(newVal[0])
      // let expandLevel = 0
      // flatData.forEach(el=>{
      //   if (el.expanded) {
      //     let curLevel = el[props.levelObj.name]
      //     if (curLevel > expandLevel) expandLevel = Number(curLevel)
      //   }
      // })
      curData = flatData.filter(el=>{
        return el.parentExpend
      })
    } else {
      curData = newVal[0]
      flatData = newVal[0]
    }
    tableData.data = curData;
    tableData.copyData = flatData;
  }
);
let tableV2Ref = ref()
let isScroll = reactive({
  flg:false,
  left:0,
  top:0
})
let tableData = reactive({
  expendList: props.expendList,
  selectData: [],
  columns: [],
  data: props.data,
  copyData: props.isTree ? treeToFlattening(props.data) : props.data,  // 是树形是将数据扁平化以方便循环查询不是树形时不需要
  rowClass: (classData) => {
    let { rowData, rowIndex } = classData
    let isZebraCrossing = ((rowData[props.rowClassName] ? rowData[props.rowClassName] : (rowData[props.rowClassName] == 0 ? 0 : rowIndex)) + 1) % 2 == 0
    let isFirstLevel = rowData[props.levelObj.name] == props.levelObj.val
    // let islaststage = rowData[props.laststage.name] == props.laststage.val && !isFirstLevel && props.isLastStageClass
    let firstBorderClassFlg = isFirstLevel && props.expendList?.length > 0 && rowData[props.levelObj.childrenName]?.length > 0 && props.isFirstLevelBorder
    let classNameSet = new Set()
    if (isZebraCrossing) classNameSet.add('zs-el-table-row-gray')
    // if (islaststage) classNameSet.add('blue-text')
    if (firstBorderClassFlg) classNameSet.add('tree-first-level')
    if (props.rowClassFun && props.rowClassFun(classData)) {
      let outRowClass = props.rowClassFun(classData)
      outRowClass.split(' ').forEach(el => {
        classNameSet.add(el)
      })
    }
    return [...classNameSet].join(' ')
  },
});

function tableScroll ({ scrollLeft, scrollTop }) {
  if (scrollTop > 0 || scrollLeft > 0) {
    isScroll.flg = true
    isScroll.left = scrollLeft
    isScroll.top = scrollTop
    return
  }
  isScroll.flg = false
}

// 扁平化数据处理
function treeToFlattening (data) {
  if (!data) return [];
  if (props.isTree) {
    let copyData = []
    const flatteningFn = (curData, parentExpend) => {
      curData.forEach(el => {
        // 记录父级是否展开 根据是否父级展开显示数据
        el.parentExpend = parentExpend
        if (props.expendList.includes(el[props.expandColumnKey]) || props.expendList.includes(el[props.rowKey])) {
          el.expanded = true;
        } else {
          el.expanded = false
        }
        copyData.push(el)
        if (el.children) {
          flatteningFn(el.children, el.expanded)
        }
      })
    }
    // true 这是首次执行根节点一定要存在
    flatteningFn(data, true)
    return copyData
  } else {
    return data
  }
}

let selectColumns = {
  key: "selection",
  width: 50,
  align: "center",
  cellRenderer: ({ rowData }) => {
    let allSelected = false
    let containsChecked = false
    if (rowData.children?.length > 0) {
      allSelected = rowData.children.every((row) => row[props.selectModelName])
      containsChecked = rowData.children.some((row) => row[props.selectModelName]);
    }
    return (
      <el-checkbox
        onChange={(val) => rowChange(val, rowData)}
        disabled={props.isDisabledSelect}
        vModel={rowData[props.selectModelName]}
        indeterminate={props.tableSelectChange ? props.tableSelectIndeterminate : (props.isLinkageSelect ? containsChecked && !allSelected : false)}
      />
    );
  },
  headerCellRenderer: () => {
    const _data = unref(tableData.copyData);
    const onChange = (value) => {
      tableData.copyData.forEach(el => el[props.selectModelName] = value)
      emits('onSelectChange', tableData.data.filter(el=>el[props.selectModelName]))
    }
    let allSelected =
      _data.length > 0
        ? _data.every((row) => row[props.selectModelName])
        : false;
    const containsChecked = _data.some((row) => row[props.selectModelName]);
    return (
      <el-checkbox
        disabled={props.isDisabledSelect}
        onChange={onChange}
        vModel={allSelected}
        indeterminate={containsChecked && !allSelected}
      />
    );
  },
};

// 查找父节点
const findParent = (data, cur) => {
  data.forEach(el => {
    if (el[props.findParentKey] == cur[props.findSonKey]) {
      el[props.selectModelName] = cur[props.selectModelName]
      if (!cur[props.selectModelName]) {
        el[props.selectModelName] = el.children.some(el => el[props.selectModelName])
      }
      findParent(tableData.data, el)
    }
    if (el.children?.length > 0) {
      findParent(el.children, cur)
    }
  })
}
const findSon = (cur) => {
  cur.children.forEach(el => {
    el[props.selectModelName] = cur[props.selectModelName]
    if (el.children && el.children.length > 0) {
      findSon(el)
    }
  })
}
const rowChange = (val, item) => {
  if (props.tableSelectChange) {
    props.tableSelectChange(val, item, tableData.data)
    return
  }
  if (props.isTree) {
    if (!props.isLinkageSelect) return
    if (item.children?.length > 0) {
      findSon(item)
    }
    findParent(tableData.data, item)
  }
  emits('onSelectChange', tableData.data.filter(el=>el[props.selectModelName]))
}

// 初始化列
let emptyMark = "-";
function initColumns (data) {
  let curCloumns = [];
  if (props.isSelect) {
    curCloumns.push(selectColumns);
  }
  data.forEach((el) => {
    let obj = {
      key: el.key,
      dataKey: el.key,
      title: el.title,
      width: el.width || 100,
      minWidth: el.minWidth,
      align: el.align || "center",
      flexGrow: el.flexGrow || 0,
      // flexShrink: el.flexShrink || 1,
      fixed: el.fixed || false,
      cellRenderer: (data) => {
        let startIndex = props.isMultistageHeader ? (props.multistageHeaderData[el.parentKey] ? props.multistageHeaderData[el.parentKey].childrenIndex[0] : -1) : -1
        return <div class={{ 
            'v2-row-box':true,
            'expand-column': props.expandColumnKey == el.key, 
            'row-border-left': props.isMultistageHeader ? (data.columnIndex == startIndex || el.borderLeft) : el.borderLeft,
            'row-border-right': el.borderRight, 
            'text-hide': true, 'text-weight': el.isWeight,
            }}
            onMouseover={(e)=>{
              curMouseoverFn(e,el,data, emptyMark)
            }}
            onMouseout={()=>{
              tooltip.left = '-1000' 
            }}
            >{
            (function () {
              {/* :expanded-row-keys="tableData.expendList" :expand-column-key="expandColumnKey" */}
              let { rowData, rowIndex } = data;
              let expandDom = null
              if (props.expandColumnKey === el.key && props.isTree) {
                expandDom = (rowData[props.laststage.name] !== props.laststage.val && rowData.children.length > 0 ? (
                  <el-icon
                    class={{
                      "el-table-v2__expand-icon": true,
                      "is-expanded-icon": rowData.expanded,
                    }}
                    size="12"
                    onClick={() => expandFn(rowData, rowIndex)}
                    style="margin-right:5px;cursor: pointer;"
                  >
                    {rowData.expanded ? <ArrowDown /> : <ArrowRight />}
                  </el-icon>
                ) : (
                  <p style="width:18px; display: inline-block"></p>
                ))
              }
              let dom = null
              if (el.cellRenderer) {
                dom = el.cellRenderer(data, emptyMark);
              } else {
                dom = <div class={Object.assign({}, { 'text-hide': true, 'text-weight': el.isWeight }, (el.currentClass ? el.currentClass(data) : {}))}>
                    {el.indentKey &&
                      [...Array(rowData[el.indentKey] - 1)].map(() => {
                        return <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>;
                      })}
                    {
                      typeRender(rowData, el)
                    }
                  </div>
              }
              return [expandDom,dom]
            })()
          }</div>
      },
      // headerCellRenderer: el.headerCellRenderer,
      // rowSpan: el.rowSpan
    };
    if (el.borderLeft || el.borderRight || el.headerClass) {
      let curHeaderClass = []
      if (el.borderLeft) {
        curHeaderClass.push('header-border-left')
      }
      if (el.borderRight) {
        curHeaderClass.push('header-border-right')
      }
      if (el.headerClass) {
        curHeaderClass.push(...el.headerClass.split(','))
      }
      obj.headerClass = curHeaderClass.join(' ')
    }
    if (el.headerCellRenderer) {
      obj.headerCellRenderer = el.headerCellRenderer
    }
    if (props.isRowSpan) {
      obj.rowSpan = el.rowSpan;
      obj.colSpan = el.colSpan;
      obj.setMergeAfterColorFn = el.setMergeAfterColorFn;
      obj.colSpanStyle = el.colSpanStyle;
      obj.rowSpanStyle = el.rowSpanStyle;
    }
    if (props.isMultistageHeader) {
      obj.parentKey = el.parentKey;
    }
    curCloumns.push(obj);
  });
  tableData.columns = curCloumns;
}
initColumns(props.columns);

// 
let tooltip = reactive({
  content: "",
  top: "0",
  left: "-1000",
  width:'0',
  after:{
    top:'100%',
    left:'50%',
    topColor:'black',
    rightColor:'transparent',
    bottomColor:'transparent',
    leftColor:'transparent',
  }
})

let curTableId = Date.now()


function getParentNodeWidth(node){
  if (typeof(node.className) !== 'string') return false
  let parentWidth = 0
  let sonWidth = 0
  function findFn(node) {
    if (node.className.indexOf('v2-row-box') > -1) {
      sonWidth = node.offsetWidth
    } 
    if (node.className.indexOf('el-table-v2__row-cell') > -1) {
      parentWidth = node.offsetWidth - 24
    } else if (node.parentNode){
      findFn(node.parentNode)
    }
  }
  findFn(node)
  return sonWidth >= parentWidth
}



let curMouseoverFn = (e, el, data, emptyMark) => {
  let domFlg = ['SPAN', 'DIV'].includes(e.target.nodeName)
  if (!domFlg) {
    tooltip.left = '-1000'
    return
  }
  let isShow = el.isHaveTooltip || getParentNodeWidth(e.target)
  if (el.isHaveTooltip === false) {
    isShow = false
  }
  let text = e.target.innerText && e.target.innerText.trim()
  if (data.rowData[el.key] == null || !isShow || !text) {
    tooltip.left = '-1000'
    return
  }
  let tooltipDom = document.getElementById('tooltipId').getBoundingClientRect()
  let curId = 'myTableV2' + curTableId
  let table = document.getElementById(curId).getBoundingClientRect()
  let curDom = e.target.getBoundingClientRect()
  tooltip.top = curDom.top - table.top - (tooltipDom.width > (el.width || 100) ? tooltipDom.height : 35) - 8
  let tooltipDomWidth = (tooltipDom.width || el.width || 100) / 2
  let viewOffsetLeft = props.fixed ? e.target.getBoundingClientRect().left - 96.375 : e.target.offsetLeft
  tooltip.left = viewOffsetLeft  + (curDom.width / 2) - tooltipDomWidth
  if (el.tooltipDirection == 'bottom' || props.tooltipDirection == 'bottom') {
    tooltip.top = tooltip.top + (tooltipDom.height < 26 ? 26 : tooltipDom.height) + 8 + e.relatedTarget.offsetHeight
    tooltip.after.top = '-36%'
    // tooltip.after.left = ''
    tooltip.after.topColor = 'reansparent'
    tooltip.after.bottomColor = 'black'
  }else if (el.tooltipDirection == 'left' || props.tooltipDirection == 'left') {
    tooltip.top = tooltip.top + e.relatedTarget.offsetHeight
    // let minLeft = e.relatedTarget.offsetWidth / 2
    tooltip.left = viewOffsetLeft - tooltipDom.width - 10
    tooltip.after.top = '34%'
    tooltip.after.left = '106%'
    tooltip.after.topColor = 'reansparent'
    tooltip.after.leftColor = 'black'
  }else if (el.tooltipDirection == 'right' || props.tooltipDirection == 'right') {
    tooltip.top = tooltip.top + e.relatedTarget.offsetHeight
    // let minLeft = e.relatedTarget.offsetWidth / 2
    tooltip.left = viewOffsetLeft + curDom.width + 10
    tooltip.after.top = '34%'
    tooltip.after.left = '-1%'
    tooltip.after.topColor = 'reansparent'
    tooltip.after.rightColor = 'black'
  }
  
  let curToolTipContent = text
  if (el.toolTipContentKey) curToolTipContent = data.rowData[el.toolTipContentKey]
  if (el.toolTipContentFn) curToolTipContent = el.toolTipContentFn(data)
  if (!curToolTipContent && curToolTipContent !== 0) {
    tooltip.left = '-1000'
  }
  tooltip.width = (el.tooltipWidth || el.width || (curDom.width + 20))
  tooltip.content = curToolTipContent
}


function expandFn(curRowData,rowIndex) {
  let childrenList = [];
  let findSon = (data) => {
    data.forEach((item) => {
      childrenList.push(item);
      if (item.children?.length > 0 && item.expanded) {
        findSon(item.children);
      }
    });
  };
  tableData.data.forEach((el) => {
    if (el[props.expandColumnKey] == curRowData[props.expandColumnKey]) {
      findSon(el.children);
      if (curRowData.expanded) {
        curRowData.expanded = false;
        el.expanded = false;
        tableData.data.splice(rowIndex + 1, childrenList.length);
      } else {
        curRowData.expanded = true;
        el.expanded = true;
        tableData.data.splice(rowIndex + 1, 0, ...childrenList);
      }
    }
  });
}

function typeRender (rowData, el) {
  if (el.type == 'number') {
    return <span>
      {rowData[el.key]
        ? Number(rowData[el.key]).toFixed(
          el.tofixedNum ? (el.tofixedNum <= 6 ? el.tofixedNum : 6) : 2
        ) + (el.unit || "")
        : rowData[el.key] == 0
          ? "0.00" + (el.unit || "")
          : emptyMark}
    </span>
  } else if (el.type == 'dict') {
    return <span>{converDict(rowData[el.key], el.currentDict, el.multiple, el.dictField, el.valField)}</span>
  } else if (el.type === 'date') {
    return <span>{convertDate(rowData, el.key, el.dateFormat, el.dateType, el.dateIntervalSymbol)}</span>
  } else if (el.type == 'initNumber') {
    return <span>{rowData[el.key] == null ? emptyMark : splitFormat(rowData[el.key], el.digit)}</span>
  } else {
    return <span>{rowData[el.key] ? rowData[el.key] + (el.unit || "") : emptyMark}</span>
  }
}

// 字典转换
/**
 * @currentDict  当前转换的字典数据
 * @dictField    当前字典取值字段
 * @valField     当前内容在字典中的字段
 * @multipe      flg是否多选 splitMark转换数组标识 joinMark转换字符串标识
 */
function converDict (val, currentDict, multiple = {}, labelField = 'dictLabel', valField) {
  if (!val && val !== 0) {
    return emptyMark;
  }
  let dictType = Object.prototype.toString.call(currentDict)
  if (dictType == '[object Object]') {
    let labelArr = (multiple.flg ? (typeof (val) == 'string' ? val.split(multiple.splitMark || ',') : val) : [val]).map(itemVal => currentDict[String(itemVal)]?.[labelField] || emptyMark);
    return labelArr.join(multiple.joinMark || ',')
  }
  if (dictType == '[object Array]' && currentDict.length > 0) {
    let dictObj = {}
    let curData
    currentDict.forEach(itemDict => {
      dictObj[valField] = itemDict
      if (itemDict[valField] == val) {
        curData = itemDict
      }
    })
    return curData?.[labelField] || (multiple.flg ? (typeof (val) == 'string' ? val.split(multiple.splitMark || ',') : val).map(itemVal => dictObj[String(itemVal)]?.[labelField] || emptyMark).join(multiple.joinMark || ',') : emptyMark);
  } else {
    return '传递的数据为空'
  }
}

// 日期转换
function convertDate (row, prop, format = "{y}-{m}-{d}", dateType = 'single', dateIntervalSymbol = '~') {
  if (dateType == 'single') {
    // 单个日期转换
    return row[prop] ? parseTime(row[prop], format) : "-"
  } else {
    // 区间日期转换
    return converIntervalDate(row, prop, format, dateIntervalSymbol)
  }
}
// 区间日期转换
function converIntervalDate (row, prop, format = "{y}-{m}-{d}", dateIntervalSymbol) {
  let fields = prop.split(',')
  let dateStringArr = []
  let flg = true
  for (var i = 0; i < fields.length; i++) {
    if (!row[fields[i]]) {
      flg = false
      break;
    }
    dateStringArr.push(parseTime(row[fields[i]], format))
  }
  return flg ? dateStringArr.join(dateIntervalSymbol) : '-'
}

//  跨行跨列
// let rowSpanIndex = ref(props.rowSpanIndex)
const CurMergeRow = ({ rowData, rowIndex, cells, columns }) => {
  if (props.colSpanIndex && props.colSpanIndex.length > 0) {
    props.colSpanIndex.forEach(el => {
      const colSpan = columns[el].colSpan({ rowData, rowIndex })
      if (colSpan > 1) {
        let width = Number.parseInt(cells[el].props.style.width)
        for (let i = 1; i < colSpan; i++) {
          width += Number.parseInt(cells[el + i].props.style.width)
          cells[el + i] = null
        }
        const style = {
          ...cells[el].props.style,
          width: `${width}px`,
          ...columns[el].colSpanStyle,
        }
        cells[el] = cloneVNode(cells[el], { style })
      }
    })
  }
  if (props.rowSpanIndex && props.rowSpanIndex.length > 0) {
    props.rowSpanIndex.forEach(el => {
      const rowSpan = columns[el].rowSpan({ rowData, rowIndex })
      if (rowSpan > 1) {
        const cell = cells[el]
        const style = {
          ...cell.props.style,
          backgroundColor: columns[el].setMergeAfterColorFn ? columns[el].setMergeAfterColorFn({ rowData, rowIndex }) : 'white',
          height: `${rowSpan * 36 - 1}px`,
          alignSelf: 'flex-start',
          borderRight: '1px solid #ebeef5',
          zIndex: 1,
          ...columns[el].rowSpanStyle
        }
        cells[el] = cloneVNode(cell, { style })
      }
    })
  }
  return cells
}

// 多级表头
const CustomizedHeader = ({ cells, columns, headerIndex }) => {
  const groupCells = [];
  columns.forEach((column, columnIndex) => {
    if (column.parentKey && props.multistageHeaderData[column.parentKey]) {
      let cur = props.multistageHeaderData[column.parentKey]
      let curStarIndex = cur.childrenIndex[0]
      if (
        columnIndex == curStarIndex
      ) {
        let width = 0
        cur.childrenIndex.forEach(el => {
          width += cells[el].props?.column.width
        })
        const ChildrenHeaders = cur.childrenIndex.map((item) => {
          return cells[item]
        })
        groupCells.push(
          <div class='cur-multistage-header' style={{ width: `${width}px` }} >
            <div class='header-label' style={{ width: `${width}px` }}>{cur.title}</div>
            <div class='header-item'>
              {...ChildrenHeaders}
            </div>
          </div>
        )
      }
    } else {
      groupCells.push(cells[columnIndex])
    }
  })
  return groupCells;
}

onActivated(() => {
  if (isScroll.flg) {
    tableV2Ref.value.scrollTo({ scrollLeft: isScroll.left, scrollTop: isScroll.top+1 })
  }
})


function clearSelect() {
  tableData.data.forEach(row=>row[props.selectModelName] = false)
  emits('onSelectChange',[])
}

defineExpose({ tableV2Ref, clearSelect })

</script>

<script lang="jsx">
export default { name: "hsTableV2" }
</script>

<style lang="scss" scoped>
:deep(.v2-row-box){
  display:flex
}
.el-table-v2 :deep(.cur-multistage-header) {
  border-left: 1px solid #E3E3E6;
  border-right: 1px solid #E3E3E6;

  .header-label {
    height: 36px;
    background: #f5f4f5;
    border-bottom: 1px solid #E3E3E6;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .header-item {
    display: flex;
    height: 36px;
    // .el-table-v2__header-cell{
    //   border-right: 1px solid #E3E3E6;
    // }
  }
}

.cur-empty {
  line-height: 60px;
  text-align: center;
  border-bottom: 1px solid #ebeef5;
}

//.el-table-v2 :deep(.blue-text) {
//  color: #999999
//}

.el-table-v2 :deep(.tree-first-level) {
  border-top: 1px solid #B9BAC0;
}

:deep(.el-table-v2__row-cell) {
  div {
    &:first-child {
      margin-inline-start: 0px !important;
    }
  }

  div+.expand-column {
    margin-left: 5px;
  }
}

:deep(.el-table-v2__expand-icon) {
  width: 13px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-inline-start: initial !important;
}

:deep(.el-table-v2__table .el-table-v2__body .el-table-v2__row .text-hide) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:deep(.text-weight) {
  font-weight: 600;
}

:deep(.el-table-v2 .el-table-v2__row-cell:has(.row-border-left)),
:deep(.el-table-v2 .header-border-left) {
  border-left: 1px solid #E3E3E6 !important;
}

:deep(.el-table-v2 .el-table-v2__row-cell:has(.row-border-right)),
:deep(.el-table-v2 .header-border-right) {
  border-right: 1px solid #E3E3E6 !important;
}

:deep(.el-table-v2 .el-table-v2__left) {
  box-shadow: 1px 0 1px 0 rgba(0, 0, 0, .06) !important;
}
.self-toolTip{
  position: absolute;
  padding: 5px 11px;
  background: black;
  color: white;
  z-index: 999;
  border-radius: 4px;
  min-width: 100px;
  text-align: center;
  word-break:break-all;
  font-size: 12px;
  line-height: 20px;
  &::after{
    content: "";
     position: absolute;
     top: calc(var(--after-top));
     left: calc(var(--after-left) - 2.5px);
     margin-left: -5px;
     border-width: 5px;
     border-style: solid;
     border-top-color: var(--after-border-top-color);
     border-right-color: var(--after-border-right-color);
     border-bottom-color: var(--after-border-bottom-color);
     border-left-color: var(--after-border-left-color);
    //  border-color: calc(var(--after-border-color));
  }
}
:deep(.zs-el-table-v2 .is-expanded-icon) {
  color: #477afd !important;
}
</style>